<template>
  <view class="language-selector">
    <!-- 弹窗蒙层 -->
    <view class="mask" @click="closePopup"></view>
    
    <!-- 弹窗内容 -->
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">{{$t('locale.selectLanguage')}}</text>
        <view class="close-btn" @click="closePopup">×</view>
      </view>
      
      <view class="language-list">
        <view v-for="language in locales" :key="language.value" 
              class="language-item" 
              :class="{ active: currentLanguage === language.value }" 
              @click="changeLanguage(language.value)">
          <text class="language-name">{{ language.text }}</text>
          <uni-icons v-if="currentLanguage === language.value" type="checkmark" size="22" color="#1890ff"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import getLocales from '../../locale/locales.js'

export default {
  name: 'language-selector',
  data() {
    return {
      currentLanguage: '', // 初始值为空，在mounted中设置
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    locales() {
        const languages = getLocales(this.$t);
        return languages;
      }
  },
  methods: {
    // 获取默认语言列表（当翻译函数不可用时使用）
    getDefaultLanguages() {
      return [
        { text: 'English', value: 'en' },
        { text: '简体中文', value: 'zh-Hans' },
        { text: '繁體中文', value: 'zh-Hant' }
      ];
    },

    // 选择语言
    changeLanguage(language) {
      // 设置语言
      uni.setLocale(language);
      // 更新当前语言状态
      this.currentLanguage = language;
      // 保存到本地存储
      uni.setStorageSync('currentLanguage', language);
      // 触发语言改变事件，通知父组件
      this.$emit('language-change', language);
      // 关闭弹窗
      this.closePopup();
    },
    
    // 关闭弹窗
    closePopup() {
      this.$emit('close');
    }
  },
  // 组件挂载时初始化当前语言
  mounted() {
    // 优先从本地存储获取用户选择的语言，然后是系统语言，最后是默认的英语
    const storedLanguage = uni.getStorageSync('currentLanguage');
    const systemLanguage = uni.getLocale();
    this.currentLanguage = storedLanguage || systemLanguage || 'en';
  }
};
</script>

<style scoped>
/* 弹窗蒙层 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: fadeIn 0.3s forwards;
}

/* 弹窗内容 - 底部弹出样式 */
.popup-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  animation: slideUp 0.3s forwards;
  max-height: 60vh; /* 限制高度为屏幕的50% */
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 底部滑入动画 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 弹窗头部 - 固定位置 */
.popup-header {
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.popup-title {
  width: fit-content;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  text-align: center;
  margin-left: 64rpx;
  flex: 1;
}

.close-btn {
  font-size: 48rpx;
  color: #999999;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.close-btn:active {
  background-color: #f0f0f0;
}

/* 语言列表 - 可滚动 */
.language-list {
  padding: 16rpx 0 16rpx 0; /* 增加底部内边距 */
  height: calc(60vh - 140rpx); /* 调整最大高度，确保内容完全显示 */
  overflow-y: auto;
}

/* 语言项 */
.language-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  font-size: 32rpx;
  color: #333333;
  border-bottom: 1rpx solid #f0f0f0; /* 添加底部分割线 */
}

.language-item:active {
  background-color: #f5f5f5;
}

.language-item.active {
  background-color: #e6f7ff;
}

.language-name {
  font-size: 32rpx;
  color: #333333;
}
</style>